<template>
	<view style="padding-bottom: 20px;">
		<view class="title">请选择投诉类型</view>

		<view class="select">
			<view class="line" @tap="select('色情低俗')">色情低俗<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '色情低俗'"></u-icon>
			</view>
			<view class="line" @tap="select('诱导')">诱导<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '诱导'"></u-icon>
			</view>
			<view class="line" @tap="select('骚扰')">骚扰<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '骚扰'"></u-icon>
			</view>
			<view class="line" @tap="select('欺诈')">欺诈<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '欺诈'"></u-icon>
			</view>
			<view class="line" @tap="select('恶意营销')">恶意营销<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '恶意营销'"></u-icon>
			</view>
			<view class="line" @tap="select('违法犯罪')">违法犯罪<u-icon name="checkbox-mark" color="#f00" size="22" top="18"
					v-if="data.type == '违法犯罪'"></u-icon>
			</view>
		</view>

		<view class="title">问题描述</view>

		<view class="desc">
			<textarea placeholder="请输入投诉内容" maxlength='500' auto-height="true" v-model="data.content" :disabled="disabled"></textarea>
			<u-upload :fileList="images" @afterRead="upload" @delete="deletePic" name="images" :maxCount="count" :disabled="disabled"></u-upload>
		</view>
		
		<button type="primary" class="sub" @tap="save" v-if="data.id==0">提交</button>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
			})
		},
		data() {
			return {
				disabled: false,
				count: 9,
				images: [],
				data: {
					id: 0,
					images: [],
					type: '色情低俗',
					content: '',
				},
			};
		},

		onLoad: function(options) {
			if (options.id) {
				this.http('complaint/detail', {
					id: options.id
				}, 'get').then(res => {
					this.data = res.data;
					this.data.images = []
					for(var i in res.data.images_list){
						this.images.push({
							url: this.imgUrl + res.data.images_list[i],
							status: 'success',
							message: ''
						})
					}
					this.disabled = true
					this.count = this.data.images_list.length
				});
			}
		},
		methods: {
			async upload(event) {
				await this.utils.uploadFile(this, event.file.url).then(res => {
					this.images.push({
						url: res.data.fullurl,
						status: 'success',
						message: ''
					})
					this.data.images.push(res.data.url)
				});
			},

			deletePic(event) {
				this.images.splice(event.index, 1)
				this.data.images.splice(event.index, 1)
			},
			select(text) {
				if (!this.disabled){
					this.data.type = text
				}
			},
			
			save: function() {
				if (!this.data.content) {
					uni.$u.toast('请填写投诉内容')
					return false;
				}
				this.http('complaint/save', this.data, 'post').then(res => {
					uni.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					}
				});
			},
		}
	};
</script>

<style>
	.title {
		width: 100%;
		background-color: #f7f7f7;
		height: 50px;
		line-height: 50px;
		color: #a0a0a0;
		text-indent: 15px;
		font-size: 16px;
	}

	.select {
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;
	}

	.line {
		border-bottom: 1rpx solid #eeeeee;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 5%;
	}

	.u-icon {
		display: inline-block;
		float: right;
	}


	.desc {
		width: 100%;
		/* margin: 0 auto; */
		background-color: #fff;
		border-radius: 5px;
		padding: 20px;
	}

	textarea {
		width: 100%;
		min-height: 150px;
	}
	
	.sub{
		width: 60%;
		margin: 20px auto;
		font-size: 16px;
	}
</style>
